<template>
  <div class="profile-wrapper">
    <div class="profile-container">
      <div class="profile-card">
        <div class="profile-header">
          <div class="profile-avatar">
            <el-avatar
              :size="90"
              :src="getAvatarUrl(userInfo.avatar)"
              class="avatar-shadow"
            />
          </div>
          <div class="profile-title">
            <h2 class="username">{{ userInfo.username }}</h2>
            <div class="profile-role">
              {{ formatRole(userInfo.role) }}
            </div>
          </div>
        </div>

        <div class="profile-content">
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">用户名</div>
              <div class="info-value">{{ userInfo.username }}</div>
            </div>

            <div class="info-item">
              <div class="info-label">邮箱</div>
              <div class="info-value">{{ userInfo.email || '未设置邮箱' }}</div>
            </div>

            <div class="info-item">
              <div class="info-label">电话</div>
              <div class="info-value">{{ userInfo.phone || '未设置电话' }}</div>
            </div>

            <div class="info-item">
              <div class="info-label">性别</div>
              <div class="info-value">{{ formatGender(userInfo.gender) }}</div>
            </div>

            <div class="info-item">
              <div class="info-label">注册时间</div>
              <div class="info-value">{{ formatDate(userInfo.createTime) }}</div>
            </div>

            <div class="info-item">
              <div class="info-label">账户状态</div>
              <div class="info-value">
                <span class="status-badge">已激活</span>
              </div>
            </div>

            <div class="info-item">
              <div class="info-label">当前时间</div>
              <div class="info-value">{{ formatLoginTime(userInfo.lastLoginTime) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
// 获取当前系统时间作为此次登录时间
const currentLoginTime = new Date().toISOString()
const userInfo = computed(() => store.state.user || {
  username: '',
  email: '',
  phone: '',
  gender: '',
  avatar: '',
  role: '',
  createTime: '',
  lastLoginTime: ''
})

const getAvatarUrl = (avatarPath) => {
  if (!avatarPath) return require('@/assets/default-avatar.png')
  try {
    return require(`@/assets${avatarPath.startsWith('/') ? avatarPath : '/' + avatarPath}`)
  } catch (e) {
    console.error('头像加载失败:', e)
    return require('@/assets/default-avatar.png')
  }
}

const formatRole = (role) => {
  return role === 'admin' ? '管理员' : '普通用户'
}

const formatGender = (gender) => {
  switch (gender) {
    case 'M': return '男'
    case 'F': return '女'
    default: return '未知'
  }
}

const formatDate = (date) => {
  if (!date) return '未知'
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).replace(/\//g, '-')
}

const formatLoginTime = (time) => {
  if (!time) return formatDate(currentLoginTime) // 改为返回当前时间
  return formatDate(time)
}
</script>

<style lang="scss" scoped>
.profile-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #f0f5ff;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.profile-container {
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
}

.profile-card {
  background: white;
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(70, 130, 255, 0.1);
  overflow: hidden;
}

.profile-header {
  padding: 24px;
  border-bottom: 1px solid #e6f0ff;
  background-color: #f8fbff;
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-avatar {
  .avatar-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.profile-title {
  .username {
    font-size: 24px;
    font-weight: 600;
    color: #1a56ff;
    margin: 0;
  }

  .profile-role {
    font-size: 14px;
    color: #4682ff;
    margin-top: 4px;
    background-color: rgba(70, 130, 255, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
  }
}

.profile-content {
  padding: 24px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  padding: 12px 0;

  .info-label {
    width: 100px;
    color: #4682ff;
    font-weight: 500;
    font-size: 15px;
  }

  .info-value {
    flex: 1;
    color: #333;
    text-align: left;
    font-size: 15px;
  }
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  background-color: #e6f0ff;
  color: #1a56ff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .profile-wrapper {
    padding: 10px;
    align-items: flex-start;
  }

  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px;
  }

  .profile-content {
    padding: 20px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-item {
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;

    .info-label {
      width: 100%;
    }

    .info-value {
      width: 100%;
    }
  }
}
</style>
